<template>
  <div style="height:100%;overflow-y:auto">
    <Row>
        <Col span="16">
        <Row style="text-align: center;">
            <h1>社保数据</h1>
        </Row>
        <Card>
            <Form :label-width="100" inline>
                <Collapse v-model="value1">
                    <Panel name="1">社保账户基本信息
                        <div slot="content">
                            <FormItem label="姓名" prop="">
                                <Input v-model="account.userName" readonly></Input>
                            </FormItem>
                            <FormItem label="身份证" prop="">
                                <Input v-model="account.userIdcard" readonly></Input>
                            </FormItem>
                            <FormItem label="社保编号" prop="">
                                <Input v-model="account.ssNum" readonly></Input>
                            </FormItem>
                            <FormItem label="社保卡号" prop="">
                                <Input v-model="account.ssId" readonly></Input>
                            </FormItem>
                            <FormItem label="性别" prop="">
                                <Input v-model="account.gender" readonly></Input>
                            </FormItem>
                            <FormItem label="民族" prop="">
                                <Input v-model="account.nation" readonly></Input>
                            </FormItem>
                            <FormItem label="出生日期" prop="">
                                <Input v-model="account.birthday" readonly></Input>
                            </FormItem>
                            <FormItem label="参加工作时间" prop="">
                                <Input v-model="account.joinWorkDate" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.ssState" readonly></Input>
                            </FormItem>
                            <FormItem label="人员工作状态" prop="">
                                <Input v-model="account.workerState" readonly></Input>
                            </FormItem>
                            <FormItem label="人员类别" prop="">
                                <Input v-model="account.workerType" readonly></Input>
                            </FormItem>

                            <FormItem label="政治面貌" prop="">
                                <Input v-model="account.political" readonly></Input>
                            </FormItem>
                            <FormItem label="行政职务" prop="">
                                <Input v-model="account.position" readonly></Input>
                            </FormItem>
                            <FormItem label="户口类型" prop="">
                                <Input v-model="account.household" readonly></Input>
                            </FormItem>
                            <FormItem label="用工形式" prop="">
                                <Input v-model="account.hireType" readonly></Input>
                            </FormItem>
                            <FormItem label="文化程度" prop="">
                                <Input v-model="account.degree" readonly></Input>
                            </FormItem>
                            <FormItem label="户口所在地" prop="">
                                <Input v-model="account.householdAddr" readonly></Input>
                            </FormItem>
                            </FormItem>
                            <FormItem label="单位编号" prop="">
                                <Input v-model="account.companyNum" readonly></Input>
                            </FormItem>
                            <FormItem label="单位名称" prop="">
                                <Input v-model="account.companyName" readonly></Input>
                            </FormItem>
                            <FormItem label="电话号码" prop="">
                                <Input v-model="account.telphone" readonly></Input>
                            </FormItem>
                            <FormItem label="地址" prop="">
                                <Input v-model="account.address" readonly></Input>
                            </FormItem>
                            <FormItem label="银行" prop="">
                                <Input v-model="account.bankName" readonly></Input>
                            </FormItem>
                            <FormItem label="银行卡号" prop="">
                                <Input v-model="account.bankCard" readonly></Input>
                            </FormItem>
                        </div>
                    </Panel>
                    <Panel name="2">养老保险
                        <div slot="content">
                            <FormItem label="参保类型" prop="">
                                <Input v-model="account.endowmentType" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.endowmentState" readonly></Input>
                            </FormItem>
                            <FormItem label="参保时间" prop="">
                                <Input v-model="account.endowmentInDate" readonly></Input>
                            </FormItem>
                            <FormItem label="保险余额" prop="">
                                <Input v-model="account.endowmentBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴纳月数" prop="">
                                <Input v-model="account.endowmentContMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计缴纳月数" prop="">
                                <Input v-model="account.endowmentTotalMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计断缴月数" prop="">
                                <Input v-model="account.endowmentBreakMonths" readonly></Input>
                            </FormItem>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缴存记录</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="endowmentPaytwo" :data="endowmentPay"></Table>
                            <br>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用明细</h4>
                            <Table style="margin-left:15px;margin-top:5px;" :columns="endowmentUsetwo" :data="endowmentUse"></Table>
                        </div>
                    </Panel>
                    <Panel name="3">医疗保险
                        <div slot="content">
                            <FormItem label="参保类型" prop="">
                                <Input v-model="account.healthType" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.healthState" readonly></Input>
                            </FormItem>
                            <FormItem label="参保时间" prop="">
                                <Input v-model="account.healthInDate" readonly></Input>
                            </FormItem>
                            <FormItem label="年度" prop="">
                                <Input v-model="account.healthYear" readonly></Input>
                            </FormItem>
                            <FormItem label="利息" prop="">
                                <Input v-model="account.healthRateAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="支出" prop="">
                                <Input v-model="account.healthPayAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="余额" prop="">
                                <Input v-model="account.healthBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴纳月数" prop="">
                                <Input v-model="account.healthContMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计缴纳月数" prop="">
                                <Input v-model="account.healthTotalMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计断缴月数" prop="">
                                <Input v-model="account.healthBreakMonths" readonly></Input>
                            </FormItem>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缴存记录</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="healthPaytwo" :data="healthPay"></Table>
                            <br>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用明细</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="healthUsetwo" :data="healthUse"></Table>
                        </div>
                    </Panel>
                    <Panel name="4">失业保险
                        <div slot="content">
                            <FormItem label="参保类型" prop="">
                                <Input v-model="account.joblessType" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.joblessState" readonly></Input>
                            </FormItem>
                            <FormItem label="参保时间" prop="">
                                <Input v-model="account.joblessInDate" readonly></Input>
                            </FormItem>
                            <FormItem label="余额" prop="">
                                <Input v-model="account.joblessBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴纳月数" prop="">
                                <Input v-model="account.joblessContMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计缴纳月数" prop="">
                                <Input v-model="account.joblessTotalMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计断缴月数" prop="">
                                <Input v-model="account.joblessBreakMonths" readonly></Input>
                            </FormItem>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缴存记录</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="joblessPaytwo" :data="joblessPay"></Table>
                            <br>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用明细</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="joblessUsetwo" :data="joblessUse"></Table>
                        </div>
                    </Panel>
                    <Panel name="5">生育保险
                        <div slot="content">
                            <FormItem label="参保类型" prop="">
                                <Input v-model="account.bitrhType" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.bitrhState" readonly></Input>
                            </FormItem>
                            <FormItem label="参保时间" prop="">
                                <Input v-model="account.bitrhInDate" readonly></Input>
                            </FormItem>
                            <FormItem label="余额" prop="">
                                <Input v-model="account.bitrhBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="个人编号" prop="">
                                <Input v-model="account.bitrhPersonalNum" readonly></Input>
                            </FormItem>
                            <FormItem label="单位编号" prop="">
                                <Input v-model="account.bitrhCompanyNum" readonly></Input>
                            </FormItem>
                            <FormItem label="缴费基数" prop="">
                                <Input v-model="account.bitrhFundAmount" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴纳月数" prop="">
                                <Input v-model="account.birthContMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计缴纳月数" prop="">
                                <Input v-model="account.birthTotalMonths"></Input>
                            </FormItem>
                            <FormItem label="累计断缴月数" prop="">
                                <Input v-model="account.birthBreakMonths" readonly></Input>
                            </FormItem>

                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缴存记录</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="birthPaytwo" :data="birthPay"></Table>
                            <br>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用明细</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="birthUsetwo" :data="birthUse"></Table>
                        </div>
                    </Panel>
                    <Panel name="6">工伤保险
                        <div slot="content">
                            <FormItem label="参保类型" prop="">
                                <Input v-model="account.injuryType" readonly></Input>
                            </FormItem>
                            <FormItem label="参保状态" prop="">
                                <Input v-model="account.injuryState" readonly></Input>
                            </FormItem>
                            <FormItem label="参保时间" prop="">
                                <Input v-model="account.injuryInDate" readonly></Input>
                            </FormItem>
                            <FormItem label="余额" prop="">
                                <Input v-model="account.injuryBalance" readonly></Input>
                            </FormItem>
                            <FormItem label="连续缴纳月数" prop="">
                                <Input v-model="account.injuryContMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计缴纳月数" prop="">
                                <Input v-model="account.injuryTotalMonths" readonly></Input>
                            </FormItem>
                            <FormItem label="累计断缴月数" prop="">
                                <Input v-model="account.injuryBreakMonths" readonly></Input>
                            </FormItem>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;缴存记录</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="injuryPaytwo" :data="injuryPay"></Table>
                            <br>
                            <h4>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用明细</h4>
                            <Table style="margin-left:5px;margin-top:5px;" :columns="injuryUsetwo" :data="injuryUse"></Table>
                        </div>
                    </Panel>
                </Collapse>
            </Form>
        </Card>
        </Col>
    </Row>
    </div>
</template>

<script>
import Viewer from '../../components/ykd-viewer.vue'
export default {
  components: {
    Viewer
  },
  data () {
    return {
      value1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
      account: {},
      baseUrl: this.$appContext.marvels_core_approve,
      $ajax: null,
      loanId: null,
      injuryPay: [],
      injuryPaytwo: [
        {
          title: '缴费年月',
          key: 'month'
        }, {
          title: '缴费日期',
          key: 'date'
        }, {
          title: '缴费基数',
          key: 'baseAmount'
        }, {
          title: '缴费额',
          key: 'amount'
        }, {
          title: '个人缴费额',
          key: 'personalAmount'
        }, {
          title: '公司缴费项',
          key: 'companyAmount'
        }, {
          title: '补贴',
          key: 'subsidyAmount'
        }, {
          title: '业务描述',
          key: 'bizRemark'
        }, {
          title: '缴费状态',
          key: 'state'
        }
      ],
      injuryUse: [],
      injuryUsetwo: [
        {
          title: '发放年月',
          key: 'payedMonth'
        }, {
          title: '发放总额',
          key: 'payedAmount'
        }, {
          title: '代扣总额',
          key: 'deductAmount'
        }, {
          title: '实发金额',
          key: 'actualAmount'
        }
      ],
      birthPay: [],
      birthPaytwo: [
        {
          title: '缴费年月',
          key: 'month'
        }, {
          title: '缴费日期',
          key: 'date'
        }, {
          title: '缴费基数',
          key: 'baseAmount'
        }, {
          title: '缴费额',
          key: 'amount'
        }, {
          title: '个人缴费额',
          key: 'personalAmount'
        }, {
          title: '公司缴费项',
          key: 'companyAmount'
        }, {
          title: '补贴',
          key: 'companyAmount'
        }, {
          title: '业务描述',
          key: 'bizRemark'
        }, {
          title: '缴费状态',
          key: 'state'
        }
      ],
      birthUse: [],
      birthUsetwo: [
        {
          title: '生育医院',
          key: 'hospital'
        }, {
          title: '生育方式',
          key: 'birthType'
        }, {
          title: '医疗费用',
          key: 'medicalCosts'
        }, {
          title: '个人支付',
          key: 'personalPay'
        }, {
          title: '基金支付',
          key: 'fundAmount'
        }, {
          title: '生育日期',
          key: 'birthDate'
        }
      ],
      joblessPay: [],
      joblessPaytwo: [
        {
          title: '缴费年月',
          key: 'month'
        },
        {
          title: '缴费日期',
          key: 'date'
        },
        {
          title: '缴费基数',
          key: 'baseAmount'
        },
        {
          title: '缴费额',
          key: 'amount'
        },
        {
          title: '个人缴费额',
          key: 'personalAmount'
        },
        {
          title: '公司缴费项',
          key: 'companyAmount'
        },
        {
          title: '补贴',
          key: 'subsidyAmount'
        },
        {
          title: '业务描述',
          key: 'bizRemark'
        },
        {
          title: '缴费状态',
          key: 'state'
        }
      ],
      joblessUse: [],
      joblessUsetwo: [
        {
          title: '发放年月',
          key: 'payedDate'
        }, {
          title: '发放总额',
          key: 'payedAmount'
        }, {
          title: '代扣总额',
          key: 'deductAmount'
        }, {
          title: '实发金额',
          key: 'actualAmount'
        }, {
          title: '业务描述',
          key: 'bizRemark'
        }
      ],
      healthUse: [],
      healthUsetwo: [
        {
          title: '发放年月日',
          key: 'payedDate'
        },
        {
          title: '医疗机构编号',
          key: 'orgNum'
        },
        {
          title: '医疗机构名称',
          key: 'orgName'
        },
        {
          title: '发生金额',
          key: 'amount'
        },
        {
          title: '业务描述',
          key: 'bizRemark'
        },
        {
          title: '个人支付',
          key: 'personalAmount'
        },
        {
          title: '基金账户支付',
          key: 'fundAmount'
        }
      ],
      healthPay: [],
      healthPaytwo: [
        {
          title: '缴费年月',
          key: 'month'
        },
        {
          title: '缴费日期',
          key: 'date'
        },
        {
          title: '缴费基数',
          key: 'baseAmount'
        },
        {
          title: '缴费额',
          key: 'amount'
        },
        {
          title: '个人缴费额',
          key: 'personalAmount'
        },
        {
          title: '公司缴费项',
          key: 'companyAmount'
        },
        {
          title: '补贴',
          key: 'subsidyAmount'
        },
        {
          title: '业务描述',
          key: 'bizRemark'
        },
        {
          title: '缴费状态',
          key: 'state'
        }
      ],
      endowmentUse: [],
      endowmentUsetwo: [
        {
          title: '发放年月',
          key: 'payedMonth'
        },
        {
          title: '发放总额',
          key: 'payedAmount'
        },
        {
          title: '代扣总额',
          key: 'deductAmount'
        },
        {
          title: '实发金额',
          key: 'actualAmount'
        },
        {
          title: '业务描述',
          key: 'bizRemark'
        }
      ],
      endowmentPay: [],
      endowmentPaytwo: [
        {
          title: '缴费年月',
          key: 'month'
        },
        {
          title: '缴费日期',
          key: 'date'
        },
        {
          align: 'center',
          title: '缴费基数',
          key: 'baseAmount'
        },
        {
          align: 'center',
          title: '缴费项',
          key: 'amount'
        },
        {
          align: 'center',
          title: '公司',
          key: 'company'
        },
        {
          align: 'center',
          title: '个人缴费额',
          key: 'personalAmount'
        },
        {
          align: 'center',
          title: '公司缴费项',
          key: 'companyAmount'
        },
        {
          align: 'center',
          title: '补贴',
          key: 'subsidyAmount'
        },
        {
          align: 'center',
          title: '缴费状态',
          key: 'state'
        }
      ]
    }
  },
  methods: {
    initpage: function () {
      this.loadCredit()
    },
    // 征信报告
    loadCredit: function () {
      var vm = this
      var params = {}
      params.loanId = this.$route.query.loanId
      params.serviceType = this.$route.query.serviceType
      params.reqNo = this.$route.query.reqNo
      this.$ajax.get(this.baseUrl + '/approve/process/credit_reporting/service/getCreditDetail', { params: params }).then(re => {
        var data = re.data
        // console.log(data)
        vm.account = data.data.data.account || {}
        vm.injuryPay = data.data.data.injuryPay || []
        vm.injuryUse = data.data.data.injuryUse || []
        vm.birthPay = data.data.data.birthPay || []
        vm.birthUse = data.data.data.birthUse || []
        vm.joblessPay = data.data.data.joblessPay || []
        vm.joblessUse = data.data.data.joblessUse || []
        vm.healthUse = data.data.data.healthUse || []
        vm.healthPay = data.data.data.healthPay || []
        vm.endowmentUse = data.data.data.endowmentUse || []
        vm.endowmentPay = data.data.data.endowmentPay || []
      }).catch(er => { })
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initpage()
    document.getElementsByTagName('title')[0].innerText = '51社保征信数据-核心管理系统'
  },
  // watch: {
  //   //点击tab页签，加载数据，只加载一次
  //   "taskParams.creditDataPyServiceImpl_detail"(v) {
  //     debugger;
  //     if (v) {
  //       this.initpage();
  //     }
  //   }
  // },
  props: {
    taskParams: Object
  }
}
</script>

<style lang="less">
.ivu-form-item {
  margin-bottom: 1px;
}
</style>
